<template>
  <div id="updateCustomer" class="updateCustomer">
    <group>
	    <div style="float: left;margin-left: 10px;margin-top: 10px;"><img slot="icon" style="width: 20px; padding: 5px" src="../../assets/svg/icon_obsolete.svg" @click="obsolete"></div>
	    <x-switch class="customerSwitch" title="正式学员" :value-map="[0, 1]" v-model="status" label-align="left"></x-switch>
	    <selector v-if="status == false" value-align="" ref="customerPossibility" v-model="tag" title="可能性" :options="possibility" @on-change="onChange"></selector>
      <x-input title="姓名" name="name" placeholder="请输入姓名" is-type="china-name" v-model="name"></x-input>
	    <x-input title="小名" name="nickname" placeholder="请输入小名" is-type="china-name" v-model="nickname"></x-input>
      <x-input title="手机" name="phone" mask="99999999999" :max="11" is-type="china-mobile" v-model="phone"></x-input>
	    <popup-picker title="性别" :data="list" v-model="sex" value-text-align="right"></popup-picker>
	    <datetime class="customerCell" title="生日" value-text-align="right" v-model="birthday"></datetime>
	    <x-textarea title="优缺点" :show-counter="false" :rows="1" autosize v-model="description"></x-textarea>
	    <cell class="customerCell" title="阶段" :value="stage_value" is-link @click.native="showPopup=true"></cell>
    </group>
	  <div>
		  <PickList ref="consultantRef" url="users/users_pop" cellTitle="销售" listTitle="销售列表"></PickList>
		  <PickList ref="teachersRef" url="users/users_pop" cellTitle="老师" listTitle="教师列表"></PickList>
	  </div>

	  <div v-transfer-dom>
		  <popup v-model="showPopup" class="checker-popup">
			  <div style="padding:10px 10px 40px 10px;">
				  <p style="padding: 5px 5px 5px 2px;color:#888;">课程类型</p>
				  <checker
					  v-model="stage_value"
					  default-item-class="demo4-item"
					  selected-item-class="demo4-item-selected"
					  disabled-item-class="demo4-item-disabled">
					  <checker-item v-for="(item,index) in items" :value="item.value" @on-item-click="onItemClick(item.id)"> {{item.value}} </checker-item>
				  </checker>
			  </div>
		  </popup>
	  </div>

	  <div v-transfer-dom>
		  <confirm v-model="obsoleteShow"
		           :title="title"
		           @on-cancel="onCancel"
		           @on-confirm="onConfirm"
		           @on-show="onShow"
		           @on-hide="onHide">
			  <p style="text-align:center;">{{ message }}</p>
		  </confirm>
	  </div>

	  <div class="error" v-show="error">{{error}}</div>

	  <flexbox>
		  <flexbox-item>
			  <x-button class="flexBtn_confirm" :gradients="['#FF5E3A', '#FF9500']" @click.native="updateCustomer">确定</x-button>
		  </flexbox-item>
		  <flexbox-item>
			  <x-button class="flexBtn_cancel" @click.native="cancelUpdate">取消</x-button>
		  </flexbox-item>
	  </flexbox>

  </div>
</template>

<script>
	import bus from '@/event/eventBus'
	import NetWorking from '../../../../utils/networking'
	import Vue from 'vue'
	import axios from 'axios'
	import VueAxios from 'vue-axios'
	import PickList from '../../../../components/mobile/picklist/picklist'
  import {Group, XInput, XButton, Cell, Datetime, PopupPicker, Popup, Checklist, TransferDom, XSwitch, Flexbox, FlexboxItem, Selector, XTextarea, Checker, CheckerItem, Confirm} from 'vux'

	Vue.use(VueAxios, axios)

  export default {
    name: "updateCustomer",
	  directives: {
		  TransferDom
	  },
    components:{
    	XSwitch,
    	PickList,
      Group,
      XInput,
      XButton,
      Cell,
	    Datetime,
	    PopupPicker,
	    Popup,
	    Checklist,
	    TransferDom,
	    Flexbox,
	    FlexboxItem,
	    Selector,
	    XTextarea,
	    Checker,
	    CheckerItem,
	    Confirm
    },
    data() {
    	return {
		    id: this.$route.params.id,
		    obsoleteShow: false,
		    message: '确定要标记为废弃吗？',
		    show: false,
		    name: '',
		    nickname: '',
		    phone: '',
		    birthday: '',
		    teacher: '',
		    sales: '',
		    sexValue: '',
		    status: 0,
		    sex: [],
		    list: [['男', '女']],
		    userListTitle: '用户列表',
		    objectList: [],
		    objectListValue: [],
		    possibility: ['A+', 'A', 'A-','B','C', '未分级'],
		    tag: '未分级',
		    description: '',
		    stage_id: '',
		    stage_value: '',
		    showPopup: false,
		    items: [],
		    error: ''
	    }
    },
	  created: function () {
		  bus.$emit("barController", 1)
		  bus.$emit("setTopSimpleTitle", '学员编辑')

    	let _this = this;
		  let url = 'customers/' + this.id
		  let url2 = 'user_customer/getUserByCustomerIdWithRole'
		  let url3 = 'list_of_value/getListOfValueByType'
		  var urlarr = new Array()

		  urlarr.push(
			  NetWorking.doGet(
				  url,
				  null,
				  null
			  ))

		  urlarr.push(
			  NetWorking.doGet(
				  url2,
				  null,
				  {params: {id: this.id, role_name: 'teacher'}}
			  ))

		  urlarr.push(
			  NetWorking.doGet(
				  url2,
				  null,
				  {params: {id: this.id, role_name: 'consultant'}}
			  ))

		  urlarr.push(
			  NetWorking.doGet(
				  url3,
				  null,
				  {params: {type: 'S_LOV_OPP_STAGE'}}
			  ))

		  var callback = function (c1, c2, c3, c4) {
			  _this.status = c1.data.customer.status
			  _this.name = c1.data.customer.name
			  _this.nickname = c1.data.customer.nickname
			  _this.phone = c1.data.customer.phone
			  _this.sexValue = c1.data.customer.sex
			  _this.birthday = c1.data.customer.birthday
			  _this.tag = c1.data.customer.tag
			  _this.description = c1.data.description
			  _this.items = c4.data.list_of_value

			  for(var i=0; i<c3.data.user_list.length; i++){
				  _this.$refs.consultantRef.fullValues.push({label: c3.data.user_list[i].nickname, value: c3.data.user_list[i].id})
			  }

			  for(var i=0; i<c2.data.user_list.length; i++){
				  _this.$refs.teachersRef.fullValues.push({label: c2.data.user_list[i].nickname, value: c2.data.user_list[i].id})
			  }
		  }

		  NetWorking.doAll2(urlarr).then(this.axios.spread(callback))
			  .catch(function (e){
				  console.log(2);
			  });
	  },
	  watch: {
		  sex: function () {
			  if(this.sex[0] == '男'){
			  	this.sexValue = true
			  }else{
			  	this.sexValue = false
			  }
		  },
		  sexValue: function () {
			  if(this.sexValue == true){
			  	this.sex = ['男']
			  }else{
				  this.sex = ['女']
			  }
		  }
	  },
    methods: {
	    onCancel () {
		    this.obsoleteShow = false
	    },
	    onConfirm (msg) {
		    this.obsoleteCustomer()
	    },
	    onHide () {
		    console.log('on hide')
	    },
	    onShow () {
		    console.log('on show')
	    },
	    obsolete () {
	    	this.obsoleteShow = true
	    },
	    onItemClick (value) {
		    this.stage_id = value

		    if (!this.disabled) {
			    this.showPopup = false
		    }
	    },
	    onChange (val) {
		    console.log(val)
	    },
	    cancelUpdate: function () {
		    this.$router.go(-1)
	    },
	    obsoleteCustomer: function () {
		    NetWorking.doPost(
			    'customers/obsoleteCustomer',
			    null,
			    null,
			    {
				    params: {
					    id: this.id
				    }
			    }
		    ).then(
			    response => {
				    let rs = response.data
				    if(rs.error_code == 0){
					    this.$router.go(-1)
				    }else{
					    alert(rs.error_message);
				    }
			    }
		    )
	    },
	    updateCustomer: function () {
		    if(this.name == '' || this.phone == ''){
			    this.error = "请确认姓名和手机填入正确"
			    return
		    }

      	NetWorking.doPut(
      		'customers',
		      null,
		      {
		      	id: this.id,
		      	name: this.name,
			      nickname: this.nickname,
			      phone: this.phone,
			      sex: this.sexValue,
			      birthday: this.birthday,
			      status: this.status,
			      tag: this.tag,
			      description: this.description,
			      stage_id: this.stage_id
		      },
		      {
			      headers: {
				      'Content-Type': 'application/json;charset=utf-8',
				      'data': 'JSON.stringify(json)'
			      },
			      params: {
				      "salesList": JSON.stringify(this.$refs.consultantRef.fullValues),
				      "teachersList": JSON.stringify(this.$refs.teachersRef.fullValues)
			      }
		      }
	      ).then(
	      	response => {
	      		let rs = response.data
			      if(rs.error_code == 0){
				      this.$router.go(-1)
			      }else{
				      alert(rs.error_message);
			      }
		      }
	      )
      }
    }
  }
</script>

<style>
	.error{
		font-size: 15px;
		color:red;
		text-align: center;
		margin-top: 10px;
	}

  .updateCustomer {
    border: solid;
    border-color: #f7f7fa;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 56px;
    box-shadow: 5px 5px 5px #888888;
    border-radius: 25px;
	  margin-bottom: 100px;
	  background-color: white;
  }

  .flexBtn {
	  width: 80% !important;
	  margin-top: 15px;
	  margin-bottom: 5px;
	  border-radius: 25px;
  }

  .buttonCustomer {
    border-radius: 25px;
	  margin-top: 15px;
  }

	.customerCell {
		height: 1.41176471em !important;
		line-height: 1.41176471 !important;
	}

	.weui-cell__bd {
		text-align: left;
	}

  .customerSwitch > .weui-cell__bd{
	  text-align: left !important;
  }

  .demo4-item {
	  background-color: #ddd;
	  color: #222;
	  font-size: 14px;
	  padding: 5px 10px;
	  margin-right: 10px;
	  line-height: 18px;
	  border-radius: 15px;
  }
  .demo4-item-selected {
	  background-color: #FF3B3B;
	  color: #fff;
  }
  .demo4-item-disabled {
	  color: #999;
  }
</style>
